{% extends "/html/hello.html" %}

{% block body %}

    <link rel="stylesheet" href="{{ url_for('static',filename='css/loading1.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/recognition.css') }}">

    <div class="speech-button-container">
        <img src="static/image/语音条.png" width="200" height="100" class="speech-button">
        <h2 class="sub-title">
            <span class="highlight">患者自述</span>——点击开始识别
        </h2>

        <div class="button-container">
            <button class="custom-button" id="startSpeechRecognition" >
                开始
                <img src="static/image/开始.png" alt="开始按钮" class="button-image">
            </button>
            <button class="custom-button" id="stopSpeechRecognition" >
                结束
                <img src="static/image/结束.png" alt="暂停按钮" class="button-image">
            </button>
        </div>

        <div class="turn1">
            <textarea id="speechTextArea">点击开始识别...</textarea>
        </div>

        {#    <div class="ok-button">#}
        {#        <a href="#" onclick="scrollToNextSection()">下一步</a>#}
        {#    </div>#}
        <div class="ok-button">
            <a href="javascript:scrollToNextSection()">下一步</a>
        </div>
    </div>

    <!-- 第二个板块:医患聊天框 -->
    <div id="chat">
        <div class="speech-button-container">
            <h2 class="sub-title2">
                <span class="highlight">医患对话</span>——点击开始识别
            </h2>
            <div class="button-container">
{#      onclick="toggleSpeechRecognition('doctor')"          #}
                <button class="custom-button2" id="doctorButton"  >
                    <img src="static/image/医生.png" alt="医生开始说话" width="50px" height="50px">
                </button>
{#      onclick="toggleSpeechRecognition('patient')"          #}
                <button class="custom-button2" id="patientButton" >
                    <img src="static/image/患者列表.png" alt="患者开始说话" width="50px" height="50px">
                </button>
            </div>
            <!-- 医生和患者的聊天框 -->
            <div class="chat-container" id="chatContainer">
            </div>
            <!-- 用法提示 -->
            <h2 class="intro">你可以根据身份，单击对应的图像按钮开始语音识别，当再次点击图像时，语音识别结束</h2>

            <div class="button-container">
                <!-- 重置按钮 -->
                <div class="ok-button">
                    <a onclick="resetChat()" style="margin-right: 1.75rem;">
                        重置
                        <img src="static/image/refresh.png" alt="重置按钮图标" width="14" height="14">
                    </a>
                </div>
                <!-- 完成 -->
                <div class="ok-button" onclick="complete('doctor')">
                    {#                <a href="{{ url_for('result') }}">完成</a>#}
                    <a>完成</a>
                </div>
            </div>

            <!-- 回到顶部按钮 -->
            <div class="top" onclick="scrollToTop()">
                回到顶部⬆
            </div>

            <div id="page_div">

            </div>

            <div id="loading1" hidden="hidden">
                <div class="loadingOne">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>

        </div>
    </div>

    <script src="{{ url_for('static',filename='js/jquery.js') }}"></script>
    <script src="{{ url_for('static',filename='js/speech_recognition.js') }}"></script>
    <script src="{{ url_for('static',filename='js/down.js') }}"></script>
    <script src="{{ url_for('static',filename='js/resetChat.js') }}"></script>
    <script src="{{ url_for('static',filename='js/chat.js') }}"></script>

{% endblock %}